<template>
  <div class="border">
    <van-cell is-link title="不使用红包" @click="$emit('not-selected')"></van-cell>
    <div
      class="item"
      v-for="item in red_packet_list"
      :key="item.id"
      @click="onRedPacketSelected(item)"
    >
      <div class="price">
        ￥ <span>{{item.value}}</span>
      </div>
      <div class="msg">
        <p class="title">{{item.name}}</p>
         <div class="info" v-if="item.minimum_limit_value">满{{item.minimum_limit_value}}元可用</div>
          <div class="info" v-if="item.product_ids">限部分商品可用</div>
          <div class="info" v-if="item.black_list_product_ids">部分商品不可用</div>
          <div class="info" v-if="item.is_proprietary_limit">限自营商品可用</div>
      </div>
      <div class="time-line" v-if="item.started_at&&item.ended_at">有效期:{{item.started_at}}至{{item.ended_at}}</div>
      <div class="can-not-use-reason" v-if="!item.can_use">  不可用原因：
        <div v-for="(it, i) in item.can_not_use_reason" :key="i">{{it}}</div>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import * as RedPacketAction from '@/api/red-packet'
import Toast from 'vant-weapp/dist/toast/toast'

export default {
  name: 'select-red-packet',
  props: ['order'],
  data () {
    return {
      red_packet_list: []
    }
  },
  methods: {
    onRedPacketSelected (item) {
      if (item.can_use) {
        this.$emit('selected', item)
      } else {
        Toast('当前商品无法使用该红包')
      }
    },
    fetchRedPackets () {
      RedPacketAction.allCanUse({ order_id: this.order.id })
        .then(data => {
          this.red_packet_list = data
        })
        .catch(err => Toast(err.msg))
    }
  },
  created () {
    this.fetchRedPackets()
  }
}
</script>

<style lang="less" scoped>
.border {
  padding:30rpx;
}
.item {
  border-bottom: solid 0.5px #eee;
  margin-top:20rpx;
  background: #ffffff;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  padding: 10px 0 0;
  .price {
    flex: 1;
    color: #f03;
    line-height: 100rpx;
    font-size: 40rpx;
    text-align: center;
    span {
      margin: 10px auto;
      text-align: center;
      font-size: 55rpx;
    }
  }
  .msg {
    flex: 2;
    display: flex;
    flex-flow: column;
    justify-content: center;
    .title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
    .info {
      font-size: 12px;
      color: #999;
    }
  }
}
.van-cell__right-icon {
  color: red;
}
.time-line {
  width: 100%;
  background: #eee;
  padding: 5px;
  color: #666;
  font-size: 12px;
  margin-top: 5px;
}
   .can-not-use-reason{
      margin-top: 5;
      background: #eee;
      width: 100%;
      padding: 5px;
      color: #666;
      font-size: 12px;
      margin-top: 5px;
    }
</style>
